<template>
  <div>
    <headNav></headNav>
    <div class="record">
      <div class="card">
          <dl>
              <dt>
                  <VanImage
                  round
                  width="1.2rem"
                  height="1.2rem"
                  :src="imgUrl"
                  />
              </dt>
              <dd>
                  <div class="name">
                    {{studentName}} 
                    <span 
                        @click="showStudentList = true"
                        v-if="roleCode == 'Parent' ? true : false" 
                        class="iconfont" 
                        style="font-size:0.18rem">
                        &#xe611;
                    </span>
                  </div>
                  <div class="place" v-if="roleCode == 'Parent' ? true : false">{{gradeName}}{{className}}</div>
                  <div class="place" v-else>{{classItem.gradeName}}{{classItem.className}}</div>
              </dd>
          </dl>
          <div class="more" @click="openEvaluateModal" v-show="roleCode != 'Parent' ? true : false">
              <div class="mask"></div>
              评价
              <i class="iconfont">&#xe632;</i>
          </div>
      </div>
      <div class="label">
            <div class="item">
                <div class="number">{{totalScore}}</div>
                <div class="text">评价总分</div>
            </div>

            <div class="item">
                <div class="number">
                    {{proportionPraise}}<span>%</span>
                </div>
                <div class="text">表现占比</div>
            </div>
            <template v-if="roleCode == 'Parent' ? true : false">
                <div class="item">
                    <div class="number">{{weekScore}}</div>
                    <div class="text">本周得分</div>
                </div>
            </template>
            <template v-else>
                <div class="item">
                    <div class="number">
                        {{rankingUp}}
                        <span>
                        /
                        {{rankingDown}}
                        </span>
                    </div>
                    <div class="text">全班排名</div>
                </div>
            </template>
      </div>
      <div class="echarts">
          <record-echarts 
            :courseNameList="courseNameList" 
            :courseNumberList="courseNumberList"
            :classCourseAverageList="classCourseAverageList">
          </record-echarts>
      </div>
      <div class="severed"></div>
      <div class="list">
          <div class="clearfix top">
              <span class="fr more" @click="openScoreInfo">
                  得分明细
                  <i class="iconfont">&#xe632;</i>
              </span>
              <h4>各项得分</h4>
          </div>
          <ul>
              <li class="clearfix" v-for="(item,index) of list" :key="index">
                  <span class="fr number" :class="item.score > 0 ? '' : 'colorRed'">{{item.score}}</span>
                  <div class="text">
                      <!--<VanImage
                      round
                      width="0.5rem"
                      height="0.5rem"
                      :src="item.imgUrl"
                      />-->
                      <div class="imgBox"></div>
                      <div class="name">{{item.reviewTypeName}}</div>
                  </div>
              </li>
          </ul>
      </div>
    </div>
    <evaluateModal
        ref="evaluateModal"
        @openTextModal="openTextModal">
    </evaluateModal>
    <textModal 
        ref="textModal">
    </textModal>
    <ActionSheet 
        v-model="showStudentList"
        :round="false"
        cancel-text="取消"
        close-on-click-action>
        <div class="studentList">
            <ul>
                <li 
                    class="border-bottom" 
                    v-for="item in studentList" 
                    :key="item.SelfId"
                    @click="handelSelectStudent(item)">
                    <div class="imgBox">
                        <VanImage
                        round
                        width="0.7rem"
                        height="0.7rem"
                        :src="item.Img"
                        />
                    </div>
                    <div class="name">{{item.RealName}}</div>
                    <div class="class">{{item.GradeName}}{{item.ClassName}}</div>
                </li>
            </ul>
        </div>
    </ActionSheet>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav';
import recordEcharts from './components/recordEcharts';
import evaluateModal from './components/evaluateModal';
import textModal from './components/textModal';
import { Image as VanImage,ActionSheet } from 'vant';
import { setTimeout } from 'timers';
export default {
    name:'studentAppraiseStudentRecord',
    components:{
      headNav,
      VanImage,
      recordEcharts,
      evaluateModal,
      textModal,
      ActionSheet
    },
    data(){
        return {
            imgUrl:'',
            studentName:'',
            totalScore:0,
            rankingUp:0,
            rankingDown:0,
            proportionPraise:0,
            weekScore:0,
            courseNameList:[],          //科目名称列表
            courseNumberList:[],        //科目分数列表
            classCourseAverageList:[],  //班级科目平均数
            list:[],
            showStudentList:false,
            //isHandelParentLogin: false
        }
    },
    computed:{
        //user
        roleCode(){
            return this.$store.state.user.roleCode
        },
        studentList(){
            return this.$store.state.user.childList
        },
        gradeNames(){
            return this.$store.state.user.gradeName
        },
        gradeIds(){
            return this.$store.state.user.gradeId
        },
        classNames(){
            return this.$store.state.user.className
        },
        classIds(){
            return this.$store.state.user.classId
        },
        studentNames(){
            return this.$store.state.user.realName
        },
        studentIds(){
            return this.$store.state.user.studentId
        },
        studentImgs(){
            return this.$store.state.user.studentImg
        },
        //studentAppraise
        studentsInfo(){
            return this.$store.state.studentAppraise.studentsInfo
        },
        classItem(){
            return this.$store.state.studentAppraise.classItem
        },
        gradeName(){
            return this.$store.state.studentAppraise.classItem.gradeName
        },
        className(){
            return this.$store.state.studentAppraise.classItem.className
        }
    },
    // watch: {
    //     $route: {
    //         handler: function(newVal, oldVal){
    //             if (newVal.path == "/studentAppraise/studentRecord" && oldVal.path == "/menu/index") {
    //                 if(this.roleCode == 'Parent'){
    //                     this.handelParentLogin();
    //                 }
    //             }
    //         },
    //         deep: true
    //     }
    // },
    methods:{
        //打开文字点评
        openTextModal(){
            this.$refs.textModal.show = true;
        },
        //学生评价
        openEvaluateModal(){
            this.$store.commit('studentAppraise/setCurrentPage',1)
            this.$refs.evaluateModal.show = true;
            this.$refs.evaluateModal.getStudentsReviewType();
        },
        openScoreInfo(){
            this.$router.push('/studentAppraise/scoreInfo');
        },
        //学生信息
        getStudentArchives(val){
            if(!val){
                val = null
            }
            
            this.$store.dispatch('studentAppraise/GetStudentArchives',val).then(res=>{
                if(res.status == 200){
                    this.imgUrl = res.data.imgUrl;
                    this.studentName = res.data.studentName;
                    this.totalScore = res.data.totalScore;

                    let ranking = res.data.ranking;
                    let rankingIndex = ranking.indexOf('/');
                    this.rankingUp = ranking.substring(0,rankingIndex);
                    this.rankingDown = ranking.substring(rankingIndex+1);
                    this.weekScore = res.data.weekScore;

                    this.proportionPraise = res.data.proportionPraise;


                    this.courseNameList = [];
                    this.courseNumberList = [];
                    this.classCourseAverageList = [];
                    let list = [];

                    list = res.data.reviewTypeScoreDtos;
                    this.list = list;
                    list.forEach(item => {
                        this.courseNameList.push({name:item.reviewTypeName});
                        this.courseNumberList.push(item.score);
                        this.classCourseAverageList.push(item.scoreAverage);
                    });
                    this.showStudentList = false;
                }
          })
        },
        //选择学生
        handelSelectStudent(item){
            var studentsInfo = {
                id:item.SelfId,
                name:item.RealName,
                portraitImgUrl:item.Img
            }
            var classItem = {
                gradeId:item.GradeId,
                classId:item.ClassId,
                gradeName:item.GradeName,
                className:item.ClassName
            }
            this.$store.commit('studentAppraise/setStudentsInfo',studentsInfo)
            this.$store.commit('studentAppraise/setClassItem',classItem)
            this.getStudentArchives()
        },
        //家长登入
        handelParentLogin(){
            // if (this.isHandelParentLogin) {
            //     return
            // }
            //this.isHandelParentLogin = true
            var studentsInfo = {
                id:this.studentIds,
                name:this.studentNames,
                portraitImgUrl:this.studentImgs
            }
            var classItem = {
                gradeId:this.gradeIds,
                classId:this.classIds,
                gradeName:this.gradeNames,
                className:this.classNames
            }
            this.$store.commit('studentAppraise/setStudentsInfo',studentsInfo)
            this.$store.commit('studentAppraise/setClassItem',classItem)
            this.getStudentArchives()
        }
    },
    activated(){
        if(this.roleCode == 'Parent'){
            this.handelParentLogin();
        }else{
            this.getStudentArchives()
        }
    },
    // deactivated () {
    //     this.isHandelParentLogin = false
    // }
}
</script>

<style lang="less" scoped>
 @import url('../../assets/css/iconfont.css');
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix:before,
.clearfix:after {
  content: ' ';
  clear: both;
}
.record{
    min-height: 100%;
    background: #fff;
    position: relative;
    .card{
        height: 2.3rem;
        background-color: #128FEF;
        display: flex;
        box-sizing: border-box;
        padding: 0 0.26rem 0.26rem;
        border-radius: 0 0 0.25rem 0.25rem;
        dl{
            flex: 1;
            display: flex;
            dt{
                width: 1.2rem;
            }
            dd{
                flex:1;
                color:#fff;
                margin-left: 0.25rem;
                .name{
                    font-size:0.34rem;
                    margin-top:0.2rem;
                    height: 0.45rem;
                    .iconfont{
                        display: inline-block;
                        margin-left: 0.05rem;
                    }
                }
                .place{
                    font-size: 0.24rem;
                    margin-top:0.1rem;
                }
            }
        }
        .more{
            width:1.2rem;
            height: 0.5rem;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color:#fff;
            font-size:0.26rem;
            margin-top: 0.35rem;
            .iconfont{
                font-size:0.24rem;
            }
           .mask{
                width:1.2rem;
                height: 0.5rem;
                background: #FFFFFF;
                opacity: 0.2;
                border-radius: 0.3rem;
                position: absolute;
                top:0;
                left:0;
           }
        }
    }
    .label{
        height: 1.7rem;
        width:6.7rem;
        position: absolute;
        top: 1.5rem;
        left: 0.26rem;
        background: #fff;
        box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
        border-radius: 0.15rem;
        display: flex;
        align-items: center;
        text-align: center;
        .item{
            flex: 1;
            .number{
                font-size: 0.4rem;
                color:#000;
                height: 0.48rem;
                span{
                    font-size: 0.2rem;
                    color:#999;
                }
            }
            .text{
                font-size: 0.24rem;
                color:#999;
                margin-top: 0.08rem;
            }
        }
    }
    .echarts{
        height: 4.7rem;
        margin-top: 1.4rem;
    }
    .severed{
        height: 0.24rem;
        background-color:#F4F4F4;
        margin-top: 0.35rem;
    }
    .list{
        box-sizing: border-box;
        padding:0 0.28rem;
        .top{
            line-height: 1rem;
            h4{
                font-size:0.3rem;
                color:#000;
            }
            span{
                color:#999;
                font-size:0.24rem;
                i{
                    font-size:0.22rem;
                }
            }
        }
        ul{
            li{
                line-height: 0.5rem;
                padding: 0.15rem 0;
                font-size:0.26rem;
                .text{
                    display: flex;
                    .name{
                        flex: 1;
                        color:#000;
                        margin-left:0.2rem;
                    }
                    .imgBox{
                        width: 0.5rem;
                        height:0.5rem;
                        background: url(./images/scoreInfo4.png) no-repeat;
                        background-size: cover;
                    }
                }
                .number{
                    color:#128FEF;
                }
                .colorRed{
                    color:#FF0000;
                }
            }
        }
    }
}
.studentList{
    ul{
        li{
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0.3rem;
            font-size:0.26rem;
            .name{
                margin-left: 0.2rem;
            }
            .class{
                margin-left: 0.2rem;
            }
        }
    }
}
</style>
